import { Layout } from "antd";
import React, {useEffect, useState } from "react";
import {createFromIconfontCN } from '@ant-design/icons';
import axios from "axios";
import "antd/dist/antd.css";
import "./App.css";
import SearchTabsRow from './components/SearchTabsRow'
import NavTabsRow from './components/NavTabsRow';



// const {iconUri,navData,appData} = SearchNavExampleData.data;
// const {iconUri,navData,appData} = JsonData.data;
// const IconFont = createFromIconfontCN({
//   scriptUrl: iconUri,
// });

const App = ()=>{
  const { Header, Content, Footer } = Layout;
  const [jsonData,setJsonData] = useState(undefined);

useEffect(() => {
  if(!jsonData)
  axios.get(`./data.json`).then((response) => {
    setJsonData(response.data.data);

  });
});

  const ContentFn = ()=>{
    if(!!jsonData){
        const IconFont = createFromIconfontCN({
          scriptUrl: jsonData?.iconUri,
        });
       return <>
        <SearchTabsRow IconFont={IconFont} navData={jsonData.navData}/>
        <NavTabsRow IconFont={IconFont} appData={jsonData.appData}/>
       </>;
    }

  }

  return (
    <Layout>
      <Header>
        <div className="logo" />
      </Header>
      <Content >{
          ContentFn()
        }
      </Content>
      <Footer width="100%" style={{textAlign:"center"}}>
      ©2021 StriveBear - <a href="http://beian.miit.gov.cn" rel="noreferrer" target="_blank">粤ICP备19007741号</a>
      </Footer>
    </Layout>
  );
}

export default App;
